<!-- https://codepen.io/evilpaper/pen/dyyZjLQ -->
<html lang="en" class="">

<head>

  <meta charset="UTF-8">
  <title>CodePen Demo</title>

  <meta name="robots" content="noindex">

  <link rel="shortcut icon" type="image/x-icon"
    href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
  <link rel="mask-icon"
    href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg"
    color="#111">
  <link rel="canonical" href="https://codepen.io/evilpaper/pen/dyyZjLQ">



  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  <style class="INLINE_PEN_STYLESHEET_ID">
    body {
      background-color: black;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-weight: 500;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .title {
      color: mintcream;
      text-transform: uppercase;
      margin-top: 3em;
      margin-bottom: 3em;
      font-size: 1em;
      letter-spacing: 0.3em;
    }

    .keyboard {
      display: flex;
      flex-direction: column;
    }

    .row {
      list-style: none;
      display: flex;
    }

    li {
      height: 3em;
      width: 3em;
      color: rgba(0, 0, 0, 0.7);
      border-radius: 0.4em;
      line-height: 3em;
      letter-spacing: 1px;
      margin: 0.4em;
      transition: 0.3s;
      text-align: center;
      font-size: 1em;
    }

    #tab {
      width: 5em;
    }

    #caps {
      width: 6em;
    }

    #left-shift {
      width: 8em;
    }

    #enter {
      width: 6em;
    }

    #right-shift {
      width: 8em;
    }

    #back {
      width: 5em;
    }

    .pinky {
      background-color: crimson;
      border: 2px solid crimson;
    }

    .pinky.selected {
      color: crimson;
    }

    .ring {
      background-color: coral;
      border: 2px solid coral;
    }

    .ring.selected {
      color: coral;
    }

    .middle {
      background-color: darkorange;
      border: 2px solid darkorange;
    }

    .middle.selected {
      color: darkorange;
    }

    .pointer1st {
      background-color: gold;
      border: 2px solid gold;
    }

    .pointer1st.selected {
      color: gold;
    }

    .pointer2nd {
      background-color: khaki;
      border: 2px solid khaki;
    }

    .pointer2nd.selected {
      color: khaki;
    }

    .fill-out-key {
      background-color: slategrey;
      border: 2px solid slategrey;
    }

    .selected {
      background-color: transparent;
      -webkit-animation: vibrate-1 0.3s linear infinite both;
      animation: vibrate-1 0.3s linear infinite both;
    }

    /* ----------------------------------------------
 * Generated by Animista
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

    .hit {
      -webkit-animation: hit 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
      animation: hit 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    }

    @-webkit-keyframes hit {
      0% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
      }

      100% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }

    @keyframes hit {
      0% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
      }

      100% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }

    @-webkit-keyframes vibrate-1 {
      0% {
        -webkit-transform: translate(0);
        transform: translate(0);
      }

      20% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px);
      }

      40% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px);
      }

      60% {
        -webkit-transform: translate(2px, 2px);
        transform: translate(2px, 2px);
      }

      80% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px);
      }

      100% {
        -webkit-transform: translate(0);
        transform: translate(0);
      }
    }

    @keyframes vibrate-1 {
      0% {
        -webkit-transform: translate(0);
        transform: translate(0);
      }

      20% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px);
      }

      40% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px);
      }

      60% {
        -webkit-transform: translate(2px, 2px);
        transform: translate(2px, 2px);
      }

      80% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px);
      }

      100% {
        -webkit-transform: translate(0);
        transform: translate(0);
      }
    }
  </style>


  <script
    src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6bce046e7128ddf9391ccf7acbecbf7ce0cbd7b6defbeb2e217a867f51485d25.js"></script>
  <script
    src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-550eae0ce567d3d9182e33cee4e187761056020161aa87e3ef74dc467972c555.js"></script>
  <script
    src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js"></script>
  <input type="hidden" id="_w_simile" data-inspect-config="3">
  <script type="text/javascript"
    src="chrome-extension://odphnbhiddhdpoccbialllejaajemdio/scripts/inspector.js"></script>
</head>

<body>
  <h1 class="title">Eyes on the screen</h1>
  <div class="keyboard">
    <ul class="row row-0">
      <li class="pinky" id="esc">ESC</li>
      <li class="pinky" id="1">1</li>
      <li class="ring" id="2">2</li>
      <li class="middle" id="3">3</li>
      <li class="pointer1st" id="4">4</li>
      <li class="pointer2nd" id="5">5</li>
      <li class="pointer2nd" id="6">6</li>
      <li class="pointer1st" id="7">7</li>
      <li class="middle" id="8">8</li>
      <li class="ring" id="9">9</li>
      <li class="pinky" id="10">0</li>
      <li class="pinky">-</li>
      <li class="pinky">+</li>
      <li class="pinky" id="back">BACK</li>
    </ul>
    <ul class="row row-1">
      <li class="pinky" id="tab">TAB</li>
      <li class="pinky" id="Q">Q</li>
      <li class="ring selected" id="W">W</li>
      <li class="middle" id="E">E</li>
      <li class="pointer1st" id="R">R</li>
      <li class="pointer2nd" id="T">T</li>
      <li class="pointer2nd" id="Y">Y</li>
      <li class="pointer1st" id="U">U</li>
      <li class="middle" id="I">I</li>
      <li class="ring" id="O">O</li>
      <li class="pinky" id="P">P</li>
      <li class="pinky">[</li>
      <li class="pinky">]</li>
      <li class="pinky">\</li>
    </ul>
    <ul class="row row-2">
      <li class="pinky" id="caps">CAPS</li>
      <li class="pinky" id="A">A</li>
      <li class="ring" id="S">S</li>
      <li class="middle" id="D">D</li>
      <li class="pointer1st" id="F">F</li>
      <li class="pointer2nd" id="G">G</li>
      <li class="pointer2nd" id="H">H</li>
      <li class="pointer1st" id="J">J</li>
      <li class="middle" id="K">K</li>
      <li class="ring" id="L">L</li>
      <li class="pinky">:</li>
      <li class="pinky">''</li>
      <li class="pinky" id="enter">ENTER</li>
    </ul>
    <ul class="row row-3">
      <li class="pinky" id="left-shift">SHIFT</li>
      <li class="pinky" id="Z">Z</li>
      <li class="ring" id="X">X</li>
      <li class="middle" id="C">C</li>
      <li class="pointer1st" id="V">V</li>
      <li class="pointer2nd" id="B">B</li>
      <li class="pointer2nd" id="N">N</li>
      <li class="pointer1st" id="M">M</li>
      <li class="middle">,</li>
      <li class="ring">.</li>
      <li class="pinky">;</li>
      <li class="pinky" id="right-shift">SHIFT</li>
    </ul>
  </div>
  <h1 class="title">Hands on the keyboard</h1>

  <script
    src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>
  <script src="https://cdpn.io/cpe/boomboom/pen.js?key=pen.js-c9bb2667-ff88-f80f-dc5f-9056f1b5e66c"
    crossorigin=""></script>


</body>

</html>